import React from 'react'
import styles from './index.less'
import { useCanvasContext } from '@/store/hooks'

// 拼接样式
const settings = [
	{
		key: '399399',
		desc: '示例模版',
		img: 'https://tse2-mm.cn.bing.net/th/id/OIP-C.ss8VyxVZetGUT-Ju7P4a0AHaNK?w=187&h=333&c=7&r=0&o=5&dpr=2&pid=1.7',
		data: '{"style":{"width":320,"height":568,"backgroundColor":"#ffffff","backgroundImage":"","backgroundPosition":"center","backgroundSize":"cover","backgroundRepeat":"no-repeat","boxSizing":"content-box"},"cmps":[{"value":"https://tse1-mm.cn.bing.net/th/id/OIP-C.oA5HPu7F4OtzbrhdT3fvJAHaNK?w=187&h=333&c=7&r=0&o=5&dpr=2&pid=1.7","style":{"position":"absolute","top":0,"left":0,"width":319,"height":567,"borderRadius":"0%","borderStyle":"none","borderWidth":"0","borderColor":"#ffffff00","transform":0},"type":2,"key":1674890250516.333},{"value":"阿逼真帅","style":{"position":"absolute","top":251,"left":78,"width":164,"height":66,"borderRadius":"0%","borderStyle":"none","borderWidth":"0","borderColor":"#ffffff00","transform":0,"lineHeight":"66px","fontSize":36.95999999999998,"fontWeight":"normal","color":"rgba(255,255,255,1)","backgroundColor":"#ffffff00","textAlign":"center","wordSpacing":"10px","fontFamily":""},"type":1,"key":1674890299799.1892}]}',
	},
	{
		key: '399737883',
		desc: '示例模版',
		img: 'https://tse2-mm.cn.bing.net/th/id/OIP-C.ss8VyxVZetGUT-Ju7P4a0AHaNK?w=187&h=333&c=7&r=0&o=5&dpr=2&pid=1.7',
		data: '{"style":{"width":320,"height":568,"backgroundColor":"#ffffff","backgroundImage":"","backgroundPosition":"center","backgroundSize":"cover","backgroundRepeat":"no-repeat","boxSizing":"content-box"},"cmps":[{"value":"https://tse1-mm.cn.bing.net/th/id/OIP-C.oA5HPu7F4OtzbrhdT3fvJAHaNK?w=187&h=333&c=7&r=0&o=5&dpr=2&pid=1.7","style":{"position":"absolute","top":0,"left":0,"width":319,"height":567,"borderRadius":"0%","borderStyle":"none","borderWidth":"0","borderColor":"#ffffff00","transform":0},"type":2,"key":1674890250516.333},{"value":"阿逼真帅","style":{"position":"absolute","top":251,"left":78,"width":164,"height":66,"borderRadius":"0%","borderStyle":"none","borderWidth":"0","borderColor":"#ffffff00","transform":0,"lineHeight":"66px","fontSize":36.95999999999998,"fontWeight":"normal","color":"rgba(255,255,255,1)","backgroundColor":"#ffffff00","textAlign":"center","wordSpacing":"10px","fontFamily":""},"type":1,"key":1674890299799.1892}]}',
	},
	{
		key: '3997373353',
		desc: '示例模版',
		img: 'https://tse2-mm.cn.bing.net/th/id/OIP-C.ss8VyxVZetGUT-Ju7P4a0AHaNK?w=187&h=333&c=7&r=0&o=5&dpr=2&pid=1.7',
		data: '{"style":{"width":320,"height":568,"backgroundColor":"#ffffff","backgroundImage":"","backgroundPosition":"center","backgroundSize":"cover","backgroundRepeat":"no-repeat","boxSizing":"content-box"},"cmps":[{"value":"https://tse1-mm.cn.bing.net/th/id/OIP-C.oA5HPu7F4OtzbrhdT3fvJAHaNK?w=187&h=333&c=7&r=0&o=5&dpr=2&pid=1.7","style":{"position":"absolute","top":0,"left":0,"width":319,"height":567,"borderRadius":"0%","borderStyle":"none","borderWidth":"0","borderColor":"#ffffff00","transform":0},"type":2,"key":1674890250516.333},{"value":"阿逼真帅","style":{"position":"absolute","top":251,"left":78,"width":164,"height":66,"borderRadius":"0%","borderStyle":"none","borderWidth":"0","borderColor":"#ffffff00","transform":0,"lineHeight":"66px","fontSize":36.95999999999998,"fontWeight":"normal","color":"rgba(255,255,255,1)","backgroundColor":"#ffffff00","textAlign":"center","wordSpacing":"10px","fontFamily":""},"type":1,"key":1674890299799.1892}]}',
	},
]

export default function DetaiList() {
	const _canvas = useCanvasContext()

	const setCanvas = canvasData => {
		_canvas.setCanvas(JSON.parse(canvasData))
	}
	return (
		<div className={styles.main}>
			<ul className={styles.box}>
				{settings.map(item => (
					<li
						onClick={() => setCanvas(item.data)}
						className={styles.item}
						key={item.key}
					>
						<h4>{item.desc}</h4>
						<img src={item.img} alt={item.desc} />
					</li>
				))}
			</ul>
		</div>
	)
}
